<template>
  <div class="chart-container">
    <div class="chart-title" style="display: flex; justify-content: space-between; align-items: center; padding: 16px;">
      <h2 style="font-size: 16px">各科室接诊人数</h2>
    </div>
    <el-divider style="margin: 0;"></el-divider>
    <div ref="pieRef" class="chart"></div>
  </div>
</template>
<script setup>
import { ref, onMounted, watch, onUnmounted, inject, nextTick } from 'vue'
import * as echarts from 'echarts'
import { debounce } from 'lodash'

const props = defineProps({
  pieData: {
    type: Array,
    default: () => [
      { value: 335, name: '儿科' },
      { value: 310, name: '骨科' },
      { value: 234, name: '眼科' },
    ]
  }
})

const pieRef = ref(null)
let pieChart = null

// 注入 resize 方法
const resizeCharts = inject('resizeCharts')

const updatePieChart = () => {
  const isDark = document.documentElement.classList.contains('dark')
  const pieOption = {
    backgroundColor: isDark ? '#1f1f1f' : '#ffffff',
    textStyle: {
      color: isDark ? '#e5eaf3' : '#303133'
    },
    tooltip: {
      show: true,
      trigger: 'item',
      formatter: function(params) {
        const percent = params.percent.toFixed(1)
        return `${params.name}<br/>接诊人数：${params.value}人<br/>占比：${percent}%`
      },
      backgroundColor: isDark ? '#1f1f1f' : '#ffffff',
      borderColor: isDark ? '#363637' : '#dcdfe6',
      textStyle: {
        color: isDark ? '#e5eaf3' : '#303133'
      }
    },
    legend: {
      orient: 'horizontal',
      left: 'center',
      bottom: 10,
      textStyle: {
        color: isDark ? '#e5eaf3' : '#303133',
        fontSize: 12
      }
    },
    series: [
      {
        name: '接诊人数',
        type: 'pie',
        radius: '75%',
        center: ['50%', '45%'],
        itemStyle: {
          borderColor: isDark ? '#1f1f1f' : '#ffffff',
          borderWidth: 2,
          borderRadius: 4
        },
        label: {
          show: false
        },
        labelLine: {
          show: false
        },
        data: props.pieData,
        emphasis: {
          scale: false,
          scaleSize: 10,
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: 'rgba(0, 0, 0, 0.5)'
          }
        }
      }
    ]
  }
  pieChart.setOption(pieOption)
}

// 修改更新主题的方法
const updateTheme = (theme) => {
  if (pieChart) {
    try {
      const option = pieChart.getOption()
      if (theme === 'dark') {
        option.backgroundColor = '#1a1a1a'
        option.textStyle = { color: '#fff' }
      } else {
        option.backgroundColor = '#fff'
        option.textStyle = { color: '#333' }
      }
      pieChart.setOption(option)
    } catch (error) {
      console.log('update theme error:', error)
    }
  }
}

// 只保留一个 defineExpose，包含所有需要暴露的内容
defineExpose({
  pieChart,
  updateTheme
})

onMounted(() => {
  nextTick(() => {
    pieChart = echarts.init(pieRef.value)
    updatePieChart()
  })

  // 使用防抖处理 resize 事件
  const handleResize = debounce(() => {
    if (pieChart) {
      pieChart.resize()
    }
  }, 100)

  window.addEventListener('resize', handleResize)

  onUnmounted(() => {
    window.removeEventListener('resize', handleResize)
    if (pieChart) {
      pieChart.dispose()
      pieChart = null
    }
  })
})

// 监听主题变化
watch(() => document.documentElement.classList.contains('dark'), (isDark) => {
  if (pieChart) {
    updatePieChart()
  }
}, { immediate: true })
</script>


<style scoped>
.chart-container {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.chart-title {
  height: 52px;
  padding: 16px !important;
}

.el-divider {
  margin: 0 !important;
}

.chart {
  flex: 1;
  height: calc(100% - 52px) !important;
  padding: 10px;
}
</style> 